<template>
  <div class="card">
    <div style="margin-bottom: 20px">
      <a-button style="margin-right: 10px" type="primary" icon="plus" @click="shouAdd">新建</a-button>
      <a-button type="danger" @click="batchDel()">批量删除</a-button>
    </div>
    <a-spin :spinning="loading">
      <a-table
        size="middle"
        style="border: 1px solid #e8e8e8"
        :rowKey="(record, index) => index"
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
      >
        <span slot="avatar" slot-scope="text, record">
          <img class="avatarStyle" :src="record.avatar" alt="" />
        </span>
        <span slot="status" slot-scope="text, record">
          <span class="statusStyle" v-if="record.status == 1">正常</span>
        </span>
        <span style="user-select: none" slot="operate" slot-scope="text, record">
          <span class="linkStyle" @click="edit(record)">编辑</span>
          <span class="lineStyle">丨</span>
          <span class="linkStyle" @click="del(record.id)">删除</span>
        </span>
      </a-table>
    </a-spin>
    <AddAdmin
      :isShowAdd.sync="isShowAdd"
      :roleOption.sync="roleOption"
      :brandOption.sync="brandOption"
      :object.sync="object"
      :title.sync="title"
      @upload="getAdminList"
    />
  </div>
</template>

<script>
import AddAdmin from './dialog/AddAdmin.vue'
import { getAdminListAPI, getRoleOptionAPI, getBrandOptionAPI, delUserAPI } from '@/api/admin.js'
export default {
  name: 'LoginAdmin',
  components: {
    AddAdmin
  },
  data() {
    return {
      title: '',
      object: {},
      roleOption: [],
      brandOption: [],
      isShowAdd: false,
      loading: false,
      select_rows: [],
      selectedRowKeys: [],
      formData: {
        order: 'desc',
        order_by: 'id',
        page: '1',
        page_size: 50,
        search: { brand_id: process.env.VUE_APP_BRAND_ID }
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '角色',
          dataIndex: 'role_names',
          align: 'center'
        },
        {
          title: '用户名',
          dataIndex: 'username',
          align: 'center'
        },
        {
          title: '昵称',
          dataIndex: 'nickname',
          align: 'center'
        },
        {
          title: '头像',
          dataIndex: 'avatar',
          align: 'center',
          scopedSlots: { customRender: 'avatar' }
        },
        {
          title: '品牌',
          dataIndex: 'brand_names',
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '更新时间',
          dataIndex: 'utime',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      tableData: []
    }
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        }
      }
    }
  },
  created() {
    this.getOption()
    this.getAdminList()
  },
  methods: {
    async getOption() {
      const res = await getRoleOptionAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      this.roleOption = res.data
      const result = await getBrandOptionAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      this.brandOption = result.data
    },
    async getAdminList() {
      try {
        this.loading = true
        const { data } = await getAdminListAPI(this.formData)
        this.tableData = data.list
        this.select_rows = []
        this.selectedRowKeys = []
      } finally {
        this.loading = false
      }
    },
    shouAdd() {
      this.title = '添加管理员'
      this.isShowAdd = true
    },
    batchDel() {
      if (this.select_rows.length < 1) return this.$message.error('请先选中至少一行数据')
      const ids = this.select_rows.map(item => item.id)
      this.$confirm({
        title: '确认删除吗?',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk: async () => {
          await delUserAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: ids })
          this.$message.success('操作成功')
          this.getAdminList()
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    del(id) {
      this.$confirm({
        title: '确认删除吗?',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk: async () => {
          await delUserAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: [id] })
          this.getAdminList()
          this.$message.success('操作成功')
        },
        onCancel() {
          return
        }
      })
    },
    edit(data) {
      this.title = '修改信息'
      this.object = data
      this.isShowAdd = true
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
}
.avatarStyle {
  width: 35px;
  height: 35px;
}
.statusStyle {
  padding: 3px 5px;
  width: 35px;
  height: 8px;
  background-color: #e6f7ff;
  color: #36a0ff;
  border: 0.1px solid #91d5ff;
  font-size: 12px;
}
.linkStyle {
  font-size: 14px;
  padding: 3px;
  color: #1890ff;
  cursor: pointer;
}
.lineStyle {
  color: #e8e8e8;
}
</style>
